<template>
	<view class="detailLayout">
		<!-- 鸡汤内容 -->
		<view class="suopDetail">
			<soup-tab-group></soup-tab-group>
			<soup-text-content :isShowReadNum="true"></soup-text-content>
		</view>

		<!-- 评论内容 -->
		<view class="comment">
			<view class="list">
				<view class="row">
					<comment-item :subReply="true"></comment-item>
				</view>
			</view>
		</view>

		<!-- 评论点赞收藏 -->
		<view class="interactive">
			<interactive-bar :isComment="true" @popupComment="handelComment"></interactive-bar>
			<view class="safe-area-bottom">
			</view>
		</view>

	</view>

	<!-- 弹出内容 -->
	<uni-popup type="bottom" :safe-area="false" ref="commentPopup">
		<comment-reply></comment-reply>
	</uni-popup>


</template>

<script setup>
	import {
		ref
	} from 'vue';

	const commentPopup = ref(null)

	const handelComment = (e) => {
		//console.log(e)
		commentPopup.value.open()
	}
</script>

<style scoped lang="scss">
	.suopDetail {
		padding: 50rpx 30rpx;
		border-bottom: 10rpx solid #F7F7F7;
	}

	.comment {
		min-height: 800rpx;
	}

	.interactive {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #e4e4e4;
		background: white;
	}
</style>